import React from 'react'

// 相当于vue2中的面向对象 里面有实例，可以使用this
class ClassComponent extends React.Component {
  // 也是一个生命周期钩子，只会执行一次
  constructor () {
    // 如果重写了父类的构造器，那么第一句必须调用super 父类的构造器
    super()

    // 下面才能使用this
    this.state = {
      name: '阿丽',
      age: 20
    }

    this.handleClick = this.handleClick.bind(this)
  }

  /**
   * 
   * 下面这种写法是错误的，它不是类的组成部分（既不是构造器，也不是方法，也不是属性）
  const handleClick = () => {
    // 普通的函数，是无法拿到this的
    console.log('---this---', this)
  
    // 只有这样写，它才会更新视图（跟小程序原生中的setData）
    this.setState({
      name: 'lina',
      age: 25
    })
  }
   */

  // 这种写法是实例方法
  handleClick () {
    // 普通的函数，是无法拿到this的
    console.log('---this---', this)

    // 只有这样写，它才会更新视图（跟小程序原生中的setData）
    this.setState({
      name: 'lina',
      age: 25
    })
  }

  // 实例属性
  // 属性名是handleClick2，属性值是箭头函数
  handleClick2 = () => {
    // 普通的函数，是无法拿到this的
    console.log('---this---', this)

    // 只有这样写，它才会更新视图（跟小程序原生中的setData）
    this.setState({
      name: '阿依土鳖公主',
      age: 30
    })
  }

  // 实例属性来处理事件【推荐】
  // 属性名 = 值
  handleClick3 = e => {
    console.log('事件对象：', e)
  }

  handleClick4 = (e, name, age) => {
    console.log('事件对象：', e, name, age)

    this.setState({
      name: name,
      age: age
    })
  }

  // 必须要重写父类的的render
  render () {
    console.log('---render---', this)

    // const that = this
    // jsx中表达式玩转一切
    return (
      <div>
        我是一个老式的类组件 - {this.state.name} {this.state.age}
        <p>
          {/* <button
            onClick={function () {
              // 普通的函数，是无法拿到this的
              console.log('---this---', this)

              // 只有这样写，它才会更新视图（跟小程序原生中的setData）
              this.setState({
                name: '铁锤',
                age: 29
              })
            }}
          >
            更换下一任
          </button> */}
          {/* <button
            onClick={() => {
              // 普通的函数，是无法拿到this的
              console.log('---this---', this)

              // 只有这样写，它才会更新视图（跟小程序原生中的setData）
              this.setState({
                name: '铁锤',
                age: 29
              })
            }}
          >
            更换下一任
          </button> */}
          {/* 这里面调用的是实例方法 */}
          {/* <button onClick={this.handleClick.bind(this)}>更换下一任</button> */}
          <button onClick={this.handleClick}>更换下一任</button>
          &nbsp;&nbsp;
          <button onClick={this.handleClick2}>更换下下任</button>
          &nbsp;&nbsp;
          <button onClick={this.handleClick3}>clickMe</button>
          &nbsp;&nbsp;
          <button
            onClick={e => {
              // 第一步执行这里面的代码

              // 第二步执行handleClick4中的代码
              this.handleClick4(e, '菲菲', 19)
            }}
          >
            clickMe2
          </button>
        </p>
      </div>
    )
  }
}

export default ClassComponent
